g-collapse {
  > * {
    -webkit-transform: translateZ(0);
  }
  .g-collapse {
    overflow: hidden;
    transition: height 0.5s;
    position: relative;
    //@extend .g-border-top-1px;
    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background: $g-border-color;
      transform: scaleY(0.5);
      position: absolute;
      bottom: 0;
    }
    .title {
      position: relative;
      ion-icon {
        position: absolute;
        right: 20px;
        color: rgba(0, 0, 0, 0.3);
        transition: transform 0.5s;
        &.up {
          transform: rotate(180deg);
        }
      }
      .button-inner {
        justify-content: flex-start
      }
      font-size: 15px;
      font-weight: 700;
      color: map_get($text-colors, title);
      margin: 0;
      height: 60px;
      padding: 0 20px;
    }
    .content {
      padding: 20px;
      font-size: 14px;
      box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.05);
      line-height: 28px;
      color: map_get($text-colors, content);
    }
  }
}

.g-collapse-group {
  @extend .g-panel;
  g-collapse {
    .g-collapse {
      border-radius: 0;
      margin-top: 0;
      margin-bottom: 0;
      //box-shadow: none;
    }
    &:first-child {
      .g-collapse {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
    }
    &:last-child {
      .g-collapse {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        &:after {
          display: none;
        }
      }
    }
  }
}
